<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <div class="buttonHeader">
        <t-button theme="primary" size="large" @click="show=true">添加公告</t-button>
        &nbsp;
        <t-button theme="primary" size="large" variant="outline">批量删除</t-button>
      </div>

      <el-table ref="multipleTable" :data="noticeList" tooltip-effect="dark" style="padding-left: 100px"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="noticeTitle" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="noticeContent" label="内容" width="180">
        </el-table-column>
        <el-table-column prop="noticeTime" label="颁布时间" width="180">
        </el-table-column>
        <el-table-column align="right" label="操作" width="300">
          <template slot-scope="scope">
            <t-button size="mini" theme="primary" @click="handleEdit(scope.$index, scope.row, scope)">编辑</t-button>
            &nbsp;
            <t-button size="mini" theme="primary" @click="handleDelete(scope.$index, scope.row)">
              删除
            </t-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="添加公告" :visible.sync="show">
        <el-form :model="notice">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="notice.noticeTitle" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input type="textarea" placeholder="请输入内容" v-model="notice.noticeContent" maxlength="200"
                      show-word-limit>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <t-button theme="primary" variant="outline" @click="show=false">取 消</t-button>
          &nbsp;
          <t-button theme="primary" @click="addNotice">确 定</t-button>
        </div>
      </el-dialog>
    </t-card>
  </div>
</template>

<script>
import axios from "axios";
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "announcement",
  data() {
    return {
      dialogFormVisible: false,
      show: false,
      formLabelWidth: "50px",
      noticeList: [],
      notice: {
        noticeTitle: "",
        noticeContent: ""
      },
      editorOption: this.toolbarOptions
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addNotice() {
      axios.post("/api/admin/notice/add", this.notice)
          .then(res => {
            if (res.data.code === 200) {
              MessagePlugin.success('成功')
              this.show = false
              this.getList();
            }
          })
    },
    getList() {
      axios.get("/api/admin/notice/list")
          .then(res => {
            if (res.data.code === 200) {
              this.noticeList = res.data.data;
            }
          })
    }
  }
}


</script>

<style>
.buttonHeader {
  margin: 20px;
}
</style>